import React, { Component } from 'react'
import TodoItem from './TodoItem'

export class TodoMain extends Component {
    
    render() {
        const {itemList,type} = this.props
        let showList = []
        if(type === 'all') {
            showList = itemList 
        } else if (type === 'active') {
            showList = itemList.filter((item) => item.finish === false)
        } else {
            showList = itemList.filter((item) => item.finish === true)
        }
        return (
        <div>
            <section className="main">
                <input id="toggle-all" className="toggle-all" type="checkbox" checked={itemList.every(item => item.finish === true)} onChange={this.cgAllIn} />
                <label htmlFor="toggle-all">Mark all as complete</label>
                <ul className="todo-list">
                    {
                        showList.map((item) => <TodoItem {...this.props} item={item} key={item.id}></TodoItem> )
                    }
                </ul>
            </section>
        </div>
        )
    }

    cgAllIn = (e) => {
        this.props.cgAllInByState(e.target.checked)
    }

}

export default TodoMain